/**
 * 	Author:		Seppe Staes
 * 	Date:		04/2013
 * 	Purpose:	When BreadcrumbCollection changes,	
 * 				Asynchronously re-render the breadcrumbView
 * 				
 */

window.BreadcrumbView = Backbone.View.extend({

	initialize: function () {
        this.render();
        
        _.bindAll(this);
        this.collection.bind('add', this.render);
        // console.log(this.collection);
        //this.model.models.bind('add', render());
        //console.log(this.collection);
    },

    render: function () {
    
    	// Loop throught the breadcrumbCollection and print out items
    	// !! Important: so we can reference each listItem with self
    	var self = this;
    	
    	$(this.el).html(this.template());
    	
    	// get ListItem models
    	this.collection.each(function(item){ 
    		// create WidgetListItem
    		var itemView = new BreadcrumbItemView({model:item});
    		// render
    		$('.breadcrumb', self.el).append(itemView.render().el);
		  });
    		
        return this;
    }

});

window.BreadcrumbItemView = Backbone.View.extend({

	tagName: "li",
	
    initialize: function () {
        this.render();
    },
    
    render: function () {
    	$(this.el).html(this.template(this.model.toJSON()));
        return this;
    }

});